{% extends 'base/base1.html' %}

{% block title %}{{ product.name }} - 商品图片轮播{% endblock %}

{% block main %}
<div class="container">
    <div class="row mt-5">
        <div class="col-md-12">
            <h2 class="text-center mb-4">{{ product.name }} - 商品图片展示</h2>
            
            {% if product.images.exists %}
                <!-- 轮播图 -->
                <div id="productImageCarousel" class="carousel slide" data-ride="carousel">
                    <!-- 轮播指示器 -->
                    <ol class="carousel-indicators">
                        <li data-target="#productImageCarousel" data-slide-to="0" class="active"></li>
                        {% for image in product.images.all %}
                            <li data-target="#productImageCarousel" data-slide-to="{{ forloop.counter }}"></li>
                        {% endfor %}
                    </ol>
                    
                    <!-- 轮播内容 -->
                    <div class="carousel-inner">
                        <!-- 主图 -->
                        <div class="item active">
                            <img src="{{ product.img.url }}" alt="{{ product.name }}" class="carousel-image">
                            <div class="carousel-caption">
                                <h3>{{ product.name }}</h3>
                                <p>主图 - 售价：¥{{ product.price }}</p>
                            </div>
                        </div>
                        
                        <!-- 商品图集 -->
                        {% for image in product.images.all %}
                            <div class="item">
                                <img src="{{ image.image.url }}" alt="{{ image.alt_text|default:product.name }}" class="carousel-image">
                                <div class="carousel-caption">
                                    <h3>{{ product.name }}</h3>
                                    <p>{{ image.alt_text|default:"商品图片" }}{% if image.is_main %} (主图){% endif %}</p>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    
                    <!-- 轮播控制按钮 -->
                    <a class="left carousel-control" href="#productImageCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#productImageCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            {% else %}
                <!-- 只有主图时 -->
                <div class="text-center">
                    <img src="{{ product.img.url }}" alt="{{ product.name }}" class="single-image">
                    <h3 class="mt-3">{{ product.name }}</h3>
                    <p>售价：¥{{ product.price }}</p>
                </div>
            {% endif %}
            
            <!-- 操作按钮 -->
            <div class="text-center mt-4">
                <a href="{% url 'main:product_detail' product.pk %}" class="btn btn-primary">返回商品详情</a>
                <a href="{% url 'main:home' %}" class="btn btn-secondary">返回首页</a>
            </div>
        </div>
    </div>
</div>

<style>
.carousel-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.single-image {
    max-width: 100%;
    height: 500px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.carousel-caption {
    background: rgba(0,0,0,0.8);
    border-radius: 4px;
    padding: 15px;
}

.carousel {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}
</style>
{% endblock %}